<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index01.css">
    <script src="index01.js"></script>
</head>
<body>
<div>
    <div class="top" id="top">
        <h3>标题</h3>
    </div>
    <div class="main">
        <div class="left" onclick="localStorage.setItem('6','66')">
            <h3 id="left"></h3>
        </div>
        <div class="right" onclick="location.reload()">
            <ul>
                <li>111111111111111111111111111111111111111111111111111111111111111111111</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>

            </ul>
        </div>
        <div class="right2" style="background:rgba(208,6,255,0.86);: #c900ff" onclick="location.reload()">
            <ul>
                <li>111111111111111111111111111111111111111111111111111111111111111111111</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>

            </ul>
        </div>
    </div>
<!--    因为受浮动的影响，浮动的元素，后面的元素，会受浮动的影响，导致页面布局错误我们可以通过 clear: both;清除上面浮动元素，对非浮动元素的影响-->
    <div style="clear: both; background: #dab9b9;position: relative;right: -20px"><p style="font-size: larger">This is a text</p></div>
    <div class="bottom" onclick="onChangeShow()">
        <h3>显示/隐藏标题</h3>
    </div>
</div>
</body>
</html>